<template>
  <div class="app-container">
    <img class="svg-image" src="@/assets/svg/404.svg" alt="404" />
    <div class="message-box">

      <div class="message">抱歉，您访问的页面不存在。{{ url }}</div>
      <div class="tip">
        请确认您输入的网址是否正确，或者点击下方按钮返回首页。
      </div>
      <van-button round type="primary" class="btn-back" @click="back">返回首页</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import {ref} from 'vue';

defineOptions({ name: "Page404" });
const router = useRouter();
const route = useRoute();
const back = () => router.replace("/");
const url = ref(route.fullPath);

</script>

<style lang="scss" scoped>
.svg-image{
    margin: 0 auto;
    display: block;
    height: 600px;
}
.message-box{
    text-align: center;
    .message{
        font-size: 30px;
        font-weight: bold;
        line-height: 80px;

    }
    .tip{
        font-size: 20px;
        color: #999999;
        line-height: 80px;
    }
}
</style>
